<template>
  <div class="corner-border-box" @click="$emit('click')">
    <div class="corner-border-box-inner" :style="innerStyle">
      <i class="corner-border cb-top-left" :style="cornerStyle" />
      <i class="corner-border cb-top-right" :style="cornerStyle" />
      <i class="corner-border cb-bottom-right" :style="cornerStyle" />
      <i class="corner-border cb-bottom-left" :style="cornerStyle" />
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'corner-border-box',
  props: {
    size: { type: [String, Number], default: '7px' },
    color: { type: String, default: '#5e676f' },
    innerStyle: { type: Object, default: () => ({}) },
  },
  emits: ['click'],
  computed: {
    cornerStyle() {
      let { size } = this;
      if (typeof size === 'number') {
        size = size + 'px';
      }
      return {
        width: size,
        height: size,
        borderColor: this.color,
      };
    },
  },
};
</script>

<style scoped lang="less">
.corner-border-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: default;
  .corner-border-box-inner {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    .corner-border {
      position: absolute;
      color: #5e676f;
      border-top: 3px solid currentColor;
      border-left: 3px solid currentColor;
    }
    .cb-top-left {
      top: 0;
      left: 0;
      transform: rotate(0deg);
    }
    .cb-top-right {
      top: 0;
      right: 0;
      transform: rotate(90deg);
    }
    .cb-bottom-right {
      bottom: 0;
      right: 0;
      transform: rotate(180deg);
    }
    .cb-bottom-left {
      bottom: 0;
      left: 0;
      transform: rotate(270deg);
    }
  }
}
</style>
